<style lang="less" scoped>
    .materiel {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        display: flex;
        .left{
            flex-grow: 1;
        }
        .right{
            min-width: 300px;
            width: 300px;
            margin-left: 10px;
            .row{
                margin-top: 5px;
                display: flex;
                align-items: flex-start;
                .label{
                    width: 90px;
                    min-width: 90px;
                    text-align: right;
                }
                .value{
                    text-align: left;
                }
            }
        }
    }
</style>
<template>
    <div class="materiel">
        <div class="left">
            <card-table
                cardtitle="物料列表"
                addbuttext="新增物料"
                :columns="columns"
                :selectList="selectList"
                :defaultSelete="defaultSelete"
                :searchForm="searchForm"
                :formItem="formItem"
                @add="add"
                @refresh="refresh"
                @on-current-change="onCurrentChange"
                :data="data">
            </card-table>
        </div>
        <div class="right">
            <my-card cardtitle="物料详情" :showright="true"  icon="compose" cardbtn="修改" @cardrightclick="materieledit">
                <ul v-if="current" style="text-align: left">
                    <li>
                        <p>物料编号：{{ current.nub }}</p>
                    </li>
                    <li>
                        <p>物料名称：{{ current.name }}</p>
                    </li>
                    <li>
                        <p>单位：{{ current.unit }}</p>
                    </li>
                    <li>
                        <p>颜色：{{ current.color }}</p>
                    </li>
                    <li>
                        <p>供应商：{{ current.supplier }}</p>
                    </li>
                    <li>
                        <p>创建人：{{ current.creatuser }}</p>
                    </li>
                    <li>
                        <p>创建时间：{{ current.creattime }}</p>
                    </li>
                    <li>
                    <li>
                        <p>备注：{{ current.remark }}</p>
                    </li>
                </ul>
            </my-card>
        </div>
        <add-materiel v-model="addmateriel" ref="addmateriel" @setdata="setdata"></add-materiel>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    import materieldata from './materieldata.js'
    import AddMateriel from './addmateriel.vue'
    export default {
        name: 'materiel',
        data () {
            return {
                role: false,
                addmateriel: false,
                columns: [
                    {
                        title: '物料编号',
                        key: 'nub'
                    },
                    {
                        title: '物料名称',
                        key: 'name'
                    },
                    {
                        title: '颜色',
                        key: 'color'
                    },
                    {
                        title: '单位',
                        key: 'unit'
                    },
                    {
                        title: '供应商',
                        key: 'supplier'
                    },
                    {
                        title: '创建时间',
                        key: 'creattime'
                    },
                    {
                        title: '创建人',
                        key: 'creatuser'
                    },
                    {
                        title: '备注',
                        key: 'remark',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.remark),
                                h('div', {
                                    slot: 'content'
                                }, params.row.remark)
                            ])
                        }
                    }
                ],  //  表格列
                data: [],  //  表格数据
                selectList: [
                    {
                        label: '编号',
                        value: 'nub'
                    },
                    {
                        label: '名称',
                        value: 'name'
                    },
                    {
                        label: '单位',
                        value: 'unit'
                    },
                    {
                        label: '颜色',
                        value: 'color'
                    },
                    {
                        label: '供应商',
                        value: 'supplier'
                    },
                    {
                        label: '创建时间',
                        value: 'creattime'
                    },
                    {
                        label: '创建人',
                        value: 'creatuser'
                    },
                    {
                        label: '备注',
                        value: 'remark'
                    }
                ],  //  搜索下拉列表
                defaultSelete: 'nub',  //  搜索下拉列表默认值
                searchForm: {
                    'nub': '',
                    'name': '',
                    'unit': '',
                    'color': '',
                    'supplier': '',
                    'creattime': '',
                    'creatuser': '',
                    'remark': ''
                },  //  表单初始值
                formItem: [
                    {
                        label: '编号',
                        key: 'nub',
                        placeholder: '请输入物料编号'
                    },
                    {
                        label: '名称',
                        key: 'name',
                        placeholder: '输入物料名称'
                    },
                    {
                        label: '单位',
                        key: 'unit',
                        placeholder: '输入物料单位'
                    },
                    {
                        label: '颜色',
                        key: 'color',
                        placeholder: '输入物料颜色'
                    },
                    {
                        label: '供应商',
                        key: 'supplier',
                        placeholder: '输入物料供应商'
                    },
                    {
                        label: '创建时间',
                        key: 'creattime',
                        placeholder: '输入物料创建时间'
                    },
                    {
                        label: '创建人',
                        key: 'creatuser',
                        placeholder: '输入物料创建人'
                    },
                    {
                        label: '备注',
                        key: 'remark',
                        placeholder: '输入物料备注'
                    }
                ],  //  搜索表单item
                current: null
            }
        },
        watch: {
            '$store.state.role': {
                handler: function (val, oldVal) {
                    this.role = this._.find(val, function(chr) {
                        return chr == '51'
                    }) ? true : false
                },
                deep: true
            }
        },
        filters: {
        },
        methods: {
            add () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.addmateriel = true
            },
            refresh () {
                this.http.getAllMateriel(this, {})
            },
            setdata (data) { // 更新数据
                this.data = data
            },
            onCurrentChange (current) {
                console.log(current)
                this.current = current
            },
            materieledit () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.$refs.addmateriel.setForm(this.current)
                this.addmateriel = true
            }
        },
        components: {
            CardTable,
            MyCard,
            AddMateriel
        },
        mounted: function () {
            this.role = this._.find(this.$store.state.role, function(chr) {
                return chr == '51'
            }) ? true : false
            this.http.getAllMateriel(this, {})
        }
    };
</script>
